<template>
  <a-layout>
    <a-layout-content
      :style="{background:'#fff', padding:'24px', margin:0, minHeight:'280px'}">

      <a-row>
        <a-col :span="6">
          <a-tree
              @select="onSelect"
              :tree-data="level"
              :field-names="{
                children: 'children',
                title: 'name',
                key: 'id',
              }"
          >

          </a-tree>
        </a-col>

        <a-col :span="18">
          <div>
            <h2>{{doc.name}}</h2>
            <span>阅读数：{{doc.viewCount}}</span>
            <span style="margin: 10px">|</span>
            <span>点赞数：{{doc.voteCount}}</span>
            <a-button shape="circle" style="margin-left: 10px" @click="vote">
<!--              #eb2f96 red #cccccc gray-->
              <template v-if="!visible" ><heart-two-tone two-tone-color="#eb2f96" /></template>
              <template v-if="visible" ><heart-two-tone two-tone-color="#cccccc" /></template>
            </a-button>

            <hr>
          </div>
          <div class="wangEditor" :innerHTML="valueHtml"></div>
        </a-col>

      </a-row>

    </a-layout-content>
  </a-layout>
</template>

<script>
import {onMounted, ref} from "vue";
import axios from "axios";
import {arrayToTree, isEmpty} from "@/util/Tool";
import {message} from "ant-design-vue";
import router from "@/router";
import {LikeOutlined, HeartTwoTone} from "@ant-design/icons-vue"

export default {
  name: "Doc",
  components: {
    LikeOutlined,
    HeartTwoTone,
  },
  setup(){
    const level = ref()
    const valueHtml = ref()
    const doc = ref({})
    const visible = ref(true)
    const load = ()=>{
      axios.get("api/getDocByEbookId?id=" + router.currentRoute.value.query.ebookId).then(res=>{
        if (res.data.code === "200"){
          const docDB = res.data.date
          level.value = arrayToTree(docDB, 0)
          if (!isEmpty(level)) {
            loadContent(level.value[0].id)
            doc.value = docDB[0]
            voteStatus()
          }
        } else {
          message.error(res.data.msg);
        }
      })
    }

    const loadContent = (id)=>{
      axios.get("api/findContent/" + id).then(res=>{
        if (res.data.code === "200"){
          valueHtml.value = res.data.date
        } else {
          message.error(res.data.msg);
        }
      })
    }

    const onSelect = (selectedKeys, e)=>{
      valueHtml.value = ' '
      loadContent(selectedKeys[0])
      doc.value = e.selectedNodes[0]
      loadViewVote()
      voteStatus()
    }

    const vote = ()=>{
      axios.get("api/docVote/" + doc.value.id).then(res=>{
        if (res.data.code === "200"){
          message.success(res.data.msg);
        } else {
          message.error(res.data.msg);
        }
        loadViewVote()
        voteStatus()
      })
    }

    const loadViewVote = () =>{
      axios.get("api/getDocByEbookId?id=" + router.currentRoute.value.query.ebookId).then(res=>{
        if (res.data.code === "200"){
          const docDB = res.data.date
          level.value = arrayToTree(docDB, 0)
          for (let i=0; i<docDB.length; i++) {
            if (doc.value.id === docDB[i].id) {
              doc.value = docDB[i]
            }
          }
        } else {
          message.error(res.data.msg);
        }
      })
    }

    const voteStatus = ()=>{
      axios.get("api/docVoteStatus/" + doc.value.id).then(res=>{
        if (res.data.code === "200"){
          visible.value = res.data.date
          console.log(res.data.date);
        } else {
          message.error(res.data.msg);
        }
      })
    }

    onMounted(()=>{
      load()
    })

    return{
      level,
      load,
      loadViewVote,
      valueHtml,
      onSelect,
      doc,
      vote,
      visible,

      LikeOutlined,
      HeartTwoTone,
    }
  }
}
</script>

<style>

</style>